<!-- 检验身份弹窗 -->
<template>
  <a-modal v-model:visible="visible" title="身份校验" :destroy-on-close="true"  :confirm-loading="confirmLoading" @ok="handleSubmit">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :colon="false"
      :label-col="{ style: { width: '90px' } }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="账号">
        {{currUid}}
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'ModalPasswordConfirm',
    components: {},
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    emits: ['ok', 'cancel'],
    data() {
      return {
        confirmLoading: false,
        formState: {
          password: ''
        },
        rules: {
          password: [{ required: true, message: this.$t('valid_required'), trigger: 'blur' }]
        }
      }
    },
    computed: {
      // 当前用户id
      currUid() {
        return this.$store.state.user.uid
      },
      visible: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('update:value', val)
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.formRef.validate().then(() => {
          this.confirmLoading = true
          setTimeout(() => {
            this.confirmLoading = false
            this.$emit('ok')
          }, 3000)
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleCancel() {
        this.$emit('cancel')
      }
    }
  })
</script>
<style lang='less' scoped>
</style>
